<template>
  <el-dialog
    :title="dialogData.type === 'add' ? '新增banner图' : '编辑banner图'"
    :visible.sync="dialogData.isShow"
    width="35%"
  >
    <el-form
      ref="ruleForm"
      :rules="rules"
      :model="formData"
      label-width="120px"
    >
      <el-form-item label="图片名称:" prop="picturName">
        <el-input
          v-model="formData.picturName"
          type="text"
          style="width:40%"
          maxlength="20"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传图片:" prop="bannerImg">
        <uploadSingImg
          :imgUrl="formData.bannerImg"
          accept=".jpg,.jpeg,.png"
          :maxSize="5"
          @getImgUrl="getImgUrl"
        >
          <template v-slot:imgInfo>
            (建议上传图片尺寸 宽750px, png jpg格式, 尺寸最大5M)
          </template>
        </uploadSingImg>
      </el-form-item>
      <el-form-item label="图片功能:" prop="actionType">
        <el-radio-group v-model="formData.actionType">
          <el-radio
            v-for="item in actionList"
            :key="item.value"
            :label="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.actionType === 'LINK'" prop="link">
        <el-input
          maxlength="300"
          style="width:60%"
          v-model.trim="formData.link"
          placeholder="请您输入跳转的链接"
        ></el-input>
      </el-form-item>
      <el-form-item label="显示顺序:" prop="sort">
        <el-input
          v-model.trim="formData.sort"
          type="text"
          style="width:40%"
          maxlength="2"
          @input="validateSort"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false">
        取 消
      </el-button>
      <el-button type="success" @click="confirm('ruleForm')">确认</el-button>
    </span>
  </el-dialog>
</template>
<script>
import uploadSingImg from '@common/uploadSingImg'
export default {
  props: ['dialogData'],
  components: {
    uploadSingImg
  },
  data() {
    var validatePicturName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入图片名称'))
        return
      }
      const { tableData } = this.dialogData
      if (!tableData.length) callback()
      const existId = tableData.some((item) => item.id === this.formData.id)
      const existName = tableData.some((item) => item.picturName === value)
      if (existName && !existId) callback(new Error('图片名称不能重复'))
      else callback()
    }
    var validateSort = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入1-99的整数,且不能为空'))
        return
      }
      const { tableData } = this.dialogData
      if (!tableData.length) callback()
      const existId = tableData.some((item) => item.id === this.formData.id)
      const existSort = tableData.some((item) => item.sort === value)
      if (existSort && !existId) callback(new Error('排序不能重复'))
      else callback()
    }
    return {
      formData: {
        id: new Date().getTime(),
        picturName: '',
        bannerImg: '',
        actionType: '',
        link: '',
        sort: ''
      },
      actionList: [
        { label: '无', value: '' },
        { label: '添加链接', value: 'LINK' },
        { label: '唤起入量弹窗', value: 'DIALOG' }
      ],
      rules: {
        picturName: [
          { required: true, validator: validatePicturName, trigger: 'blur' }
        ],
        bannerImg: [
          { required: true, message: '请上传图片', trigger: 'change' }
        ],
        link: [
          {
            required: true,
            pattern:
              '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
            message: '链接格式不正确',
            trigger: 'blur'
          }
        ],
        sort: [{ required: true, validator: validateSort, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    if (this.dialogData.obj) this.formData = this.dialogData.obj
  },
  methods: {
    /* banner图片 */
    getImgUrl(url) {
      this.formData.bannerImg = url
      this.$refs['ruleForm'].validateField('bannerImg')
    },
    /* 输入为数字 */
    validateSort(val) {
      this.formData.sort = Number(val.replace(/[^\d]/g, '')) || ''
    },
    /* 确认提交 */
    confirm(formName) {
      let createTime = ''
      const { type, obj } = this.dialogData
      if (type === 'add')
        createTime = this.moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
      else createTime = obj.createTime
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const updateTime = this.moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
          const userName = this.$store.state.user.userName
          const obj = { ...this.formData, createTime, updateTime, userName }
          this.$emit('updatelist', obj, this.dialogData.index)
          this.dialogData.isShow = false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
